/* 可删除的message */

import { message } from 'ant-design-vue'
import { h, VNode } from 'vue'

interface MessageContent {
  content: string
}

/*
  h: 是content自带的参数，表示createElement
  content：文本内容
*/
const createElementVNode = (h: any, content: string): VNode => {
  // 延用的官方的文本内容及样式
  const innerText = h('span', { style: { color: '#4a5970', fontSize: '14px' } }, content)
  // 自定义关闭图标
  const innerIcon = h('i', {
    class: 'iconfont icon-close-line',
    style: { marginLeft: '10px', color: '#1890ff', cursor: 'pointer' },
    onClick: () => message.destroy()

    // click: () => this.slotDel()
  })
  // 合并到一个VNode节点中
  const container = h('span', {}, [innerText, innerIcon])
  return container
}

// 由于message有多种状态, 这里需要额外处理
interface DTMessage {
  [key: string]: (content?: string | MessageContent, duration?: number, onClose?: () => void, key?: string) => void
}

const dtMessage: DTMessage = {}
;['error', 'success', 'info', 'warning', 'warn', 'loading'].forEach(type => {
  // 处理message[type](config)参数为对象类型
  dtMessage[type] = (content, duration, onClose, key) => {
    if (typeof content === 'object') {
      return (message as any)[type]({
        ...(content as MessageContent),
        content: () => createElementVNode(h, (content as MessageContent).content),
        key: key
      })
    }
    return (message as any)[type](() => createElementVNode(h, content as string), duration, onClose, key)
  }
})
// 添加销毁方法
dtMessage.destroy = () => {
  message.destroy()
}
// dtMessage.destroy = (key?: any) => {
//   if (key) {
//     message.destroy(key)
//   } else {
//     message.destroy()
//   }
// }
export default dtMessage
